<template>
  <div class="detailbox">
    <div class="motai" ref="motai" @click="disappear">
      <img :src="src1" alt="" />
    </div>
    <div v-for="item in res" :key="item.liveID" class="xunhuan">
      <div class="detailimg">
        <img :src="item.detailimg" alt="" class="detailimg" />
      </div>
      <!-- 黑色动态标题 -->
      <div class="banner" ref="nav1">
        <div class="banner_left" ref="banner_left">
          <h1 class="left_top" ref="left">
            <span class="title">{{ item.livetitle }}</span>
            <span class="tags">直播</span>
          </h1>
          <div class="msg">
            <p class="people">本期嘉宾：{{ item.dakaname }}</p>
            <div class="share">
              <span>分享:</span>
              <a href="" class="iconfont icon-weibo"></a>
              <a href="" class="iconfont icon-weixin"></a>
              <a href="" class="iconfont icon-qqkongjian"></a>
            </div>
          </div>
        </div>
        <div class="banner_right" ref="right">
          <p>{{ item.interest }}</p>
          <div class="baoming" ref="baoming">立即报名</div>
        </div>
      </div>
      <div class="main_content">
        <div class="vediobox">
          <div class="ve_left">
            <h3>本期介绍</h3>
            <p>
              {{ item.introduce }}
            </p>
          </div>
          <div class="ve_right">
            <video
              src="@/assets/蓝铅笔快乐学宣传片2017.mp4"
              autoplay
              muted
              controls
            ></video>
          </div>
        </div>
        <div class="dakabox">
          <div class="author">
            <div class="author_left">
              <!-- 大咖头像 -->
              <img
                :src="item.dakaimg"
                alt=""
                class="touxiang"
                @click="todaka(item.xuehao)"
              />
              <div class="attention">
                <span class="zuozhe">{{ item.dakaname }}</span>
                <span class="iconfont icon-renzheng"></span>
                <div class="guanzhu">关注</div>
              </div>
            </div>
            <div class="author_right">
              <p>
                {{ item.jieshao }}
              </p>
            </div>
          </div>
          <div class="works">
            <!-- 大咖及作品 -->
            <span><h3>大咖作品</h3></span>
            <div class="works_contain">
              <ul class="workslist">
                <!-- <li><img :src="imgsrc" alt="" @click="beBig(imgsrc)" /></li>
                <li><img :src="imgsrc1" alt="" @click="beBig(imgsrc1)" /></li>
                <li><img :src="imgsrc2" alt="" @click="beBig(imgsrc2)" /></li>
                <li><img :src="imgsrc3" alt="" @click="beBig(imgsrc3)" /></li>
                <li><img :src="imgsrc4" alt="" @click="beBig(imgsrc4)" /></li>
                <li><img :src="imgsrc5" alt="" @click="beBig(imgsrc5)" /></li> -->
                <li>
                  <img
                    :src="item.img3[0].dakazuopinimg"
                    alt=""
                    @click="beBig(item.img3[0].dakazuopinimg)"
                  />
                </li>
                <li>
                  <img
                    :src="item.img3[1].dakazuopinimg"
                    alt=""
                    @click="beBig(item.img3[1].dakazuopinimg)"
                  />
                </li>
                <li>
                  <img
                    :src="item.img3[2].dakazuopinimg"
                    alt=""
                    @click="beBig(item.img3[2].dakazuopinimg)"
                  />
                </li>
                <li>
                  <img
                    :src="item.img3[3].dakazuopinimg"
                    alt=""
                    @click="beBig(item.img3[3].dakazuopinimg)"
                  />
                </li>
                <li>
                  <img
                    :src="item.img3[4].dakazuopinimg"
                    alt=""
                    @click="beBig(item.img3[4].dakazuopinimg)"
                  />
                </li>
                <li>
                  <img
                    :src="item.img3[5].dakazuopinimg"
                    alt=""
                    @click="beBig(item.img3[5].dakazuopinimg)"
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="guanggao">
          <img
            src="https://ss.lanqb.com/o_1fb1kko021lpi1aud10f61cgk1o48r.jpg"
            alt=""
          />
        </div>
      </div>

      <!-- 评论 -->
      <div class="commit_list">
        <span><h3>交流讨论</h3></span>
        <div class="comment">
          <el-input
            type="textarea"
            class="publish"
            v-model="textarea"
            maxlength="1000"
            show-word-limit
            resize="none"
          />
          <button @click="pinlun(item.liveID)">评论</button>
        </div>
        <div class="commontbox">
          <commont :liveId="item.liveID"></commont>
        </div>
      </div>
    </div>

    <!-- <template></template> -->
  </div>
</template>
<script>
import commont from "@/views/daka/components/Commont.vue";
export default {
  components: {
    commont,
  },
  data() {
    return {
      liveid: "",
      liveID: "",
      dakaname: "",
      res: "",
      src1: "",
      textarea: "",
    };
  },
  methods: {
    todaka(xuehao) {
       this.$router.push({
        name: "wodeceshi",
        query: { xuehao }})
    },
    pinlun(liveID) {
      if (!this.textarea.length) {
        this.$alert("内容不能为空", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        this.axios.get("/Daka/addcommit", {
          params: { usercommit: this.textarea, liveID },
        });
        this.$router.go(0);
      }
    },
    beBig(imgSrc) {
      this.src1 = imgSrc;
      this.$refs.motai.style.display = "flex";
    },
    disappear() {
      this.$refs.motai.style.display = "none";
    },
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 460) {
        this.$refs.nav1[0].style.height = 54 + "px";
        this.$refs.nav1[0].style.overflow = "hidden";
        this.$refs.nav1[0].style.transition = "all 0.5s";
        this.$refs.baoming[0].style.width = 114 + "px";
        this.$refs.baoming[0].style.height = 36 + "px";
        this.$refs.baoming[0].style.lineHeight = 36 + "px";
      } else if (scrollTop < 460) {
        this.$refs.nav1[0].style.height = 140 + "px";
        this.$refs.baoming[0].style.width = 160 + "px";
        this.$refs.baoming[0].style.height = 50 + "px";
        this.$refs.baoming[0].style.lineHeight = 50 + "px";
      }
    },
  },
  mounted() {
    this.liveID = this.$route.query.liveID;
    this.dakaname = this.$route.query.name1;
    this.axios
      .get(`/Daka/detail?liveID=${this.liveID}&Name=${this.dakaname}`)
      .then((req) => {
        console.log(req.data);
        this.res = req.data;
        window.addEventListener("scroll", this.scrollToTop);
      });
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.motai {
  width: 100%;
  height: 100vh;
  z-index: 500;
  justify-content: center;
  align-items: center;
  background-color: rgba(58, 58, 58, 0.5);
  position: fixed;
  top: 0;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 1s;
  animation-name: zoom;
  animation-duration: 0.6s;
  display: none;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}

.motai img {
  /* margin-top: 100px; */
  width: 1200px;
  height: 1380px;
}
.detailimg {
  max-width: 1920px;
  width: 100%;
  height: 400px;
  display: table-cell;
  text-align: center;
  overflow: hidden;
  img {
    width: 1920px;
    height: 400px;
    margin-left: -200px;
  }
  // background-color: rgb(253, 253, 187);
}
.xunhuan {
  position: relative;
}
.banner {
  width: 100%;
  height: 140px;
  background-color: #212b34;
  position: sticky;
  top: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 200;

  .banner_left {
    margin-top: 30px;
    // margin-left: -30px;
  }
  .banner_right {
    margin-top: 10px;
    margin-left: 80px;
    width: 255px;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
  }
}
.left_top {
  text-align: center;
  line-height: 25px;
  color: #fff;
}
.title {
  font-size: 26px;
  font-weight: 500;
}
.tags {
  color: #634b19;
  font-size: 12px;
  display: inline-block;
  width: 40px;
  height: 22px;
  border-radius: 5px;
  text-align: center;
  line-height: 22px;
  background-color: #edce8c;
  margin-left: 10px;
}
.people {
  color: #ffffff99;
  font-size: 14px;
}
.share span {
  font-size: 16px;
  color: #edce8c;
}
.share a {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-decoration: none;
  margin-left: 10px;
  color: #edce8c;
}

.banner_right p {
  font-size: 14px;
  color: #ffffff99;
}
.msg {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.baoming {
  width: 160px;
  height: 50px;
  font-size: 18px;
  border-radius: 25px;
  background-color: #edce8c;
  color: #634b19;
  text-align: center;
  line-height: 50px;
}
.main_content {
  width: 100%;
  background-color: #f8f8f8;
  padding-bottom: 100px;
}
.vediobox {
  width: 1180px;
  height: 360px;
  margin: 0 auto;
  display: flex;
  border-bottom: 2px solid rgba(214, 214, 214, 0.8);
  justify-content: space-between;
  margin-top: 80px;
  padding-top: 40px;

  .ve_left {
    width: 540px;
    height: 160px;
    h3 {
      color: rgba(99, 75, 25, 0.5);
    }
    p {
      font-size: 14px;
      color: #434343;
      line-height: 25px;
      margin-top: 20px;
    }
  }
  .ve_right {
    width: 570px;
    height: 320px;
    // background-color: rgb(117, 181, 255);
    video {
      width: 570px;
      height: 320px;
    }
  }
}
.dakabox {
  width: 1180px;
  height: 600px;
  margin: 0 auto;
  margin-top: 60px;
  background-color: rgb(255, 254, 254);
  padding: 40px 40px;
}
.author {
  width: 1024px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  // background-color: rgb(27, 21, 26);
  .author_left {
    width: 230px;
    height: 100px;
    display: flex;
    justify-content: flex-start;
    .touxiang {
      width: 96px;
      height: 96px;
      background-color: rgb(149, 248, 149);
      border-radius: 50%;
    }
    .attention {
      width: 120px;
      height: 73px;
      margin-left: 20px;
      .zuozhe {
        font-size: 20px;
        color: #434343;
      }
      .iconfont {
        font-size: 20px;
        color: rgb(255, 232, 102);
      }
      .guanzhu {
        width: 98px;
        height: 32px;
        font-size: 14px;
        border-radius: 16px;
        text-align: center;
        line-height: 32px;
        color: #634b19;
        background-color: #edce8c;
        margin-top: 20px;
        &:hover {
          background-color: white;
          color: #edce8c;
          border: 1px solid #edce8c;
          transition: all 0.6s;
        }
      }
    }
  }
  .author_right {
    p {
      width: 650px;
      height: 100px;
      border-left: 3px solid rgb(231, 230, 230);
      font-size: 14px;
      color: #212b34;
      padding-left: 50px;
      margin-left: 100px;
    }
  }
}
.works {
  width: 1100px;
  height: 460px;
  margin: 0 auto;
  margin-top: 40px;
  // background-color: rgb(115, 236, 252);
  h3 {
    color: rgba(99, 75, 25, 0.5);
    margin-left: 40px;
    margin-bottom: 10px;
  }

  .works_contain {
    width: 1100px;
    height: 420px;

    .workslist {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      li {
        list-style: none;
      }
      img {
        width: 320px;
        height: 195px;
        object-fit: cover;
        background-color: rgb(241, 175, 175);
        margin-left: 40px;
        margin-top: 10px;
      }
    }
  }
}
.guanggao {
  width: 1180px;
  height: 98px;
  margin: 0 auto;
  margin-top: 30px;

  img {
    width: 1180px;
    height: 98px;
    margin-bottom: 20px;
  }
}
.commit_list {
  width: 100%;
  background-color: #eeeeee;
  padding-top: 20px;
  padding-bottom: 100px;
  h3 {
    color: rgba(99, 75, 25, 0.5);
    margin-left: 260px;
    margin-bottom: 20px;
  }
  .comment {
    width: 900px;
    height: 100px;
    background-color: #fff;
    margin: 0 auto;
    padding: 40px 140px 100px 140px;
    border: 0;
    outline: none;
    position: relative;

    button {
      width: 120px;
      height: 40px;
      border-radius: 20px;
      color: #634b19;
      background-color: #edce8c;
      font-size: 18px;
      line-height: 40px;
      text-align: center;
      border: none;
      position: absolute;
      right: 140px;
      bottom: 40px;
    }
  }
  .commontbox {
    width: 900px;
    // height: 180px;
    margin: 0 auto;
    padding: 40px 140px;
    background-color: #fff;
  }
}
</style>
<style scoped>
.publish /deep/ .el-textarea__inner {
  width: 900px;
  height: 100px;
  border: 0;
  outline: none;
  background-color: #f6f6f6;
  border-radius: 8px;
  font-size: 18px;
  color: rgb(46, 46, 46);
}
.publish /deep/ .el-input__count {
  background-color: #f6f6f6;
}
</style>